<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0; list-style:none;}
a{color:#111;text-decoration:none; font-size:13px;}
.out{width:800px;height:30px;background:#ccc;margin:0 auto; position:relative;}
.box{ height:30px;width:800px; line-height:30px; position:relative;z-index:2;}
.box li{float:left; height:30px;padding:0 35px;}
.float{ position:absolute;top:0;left:0;width:100px;height:30px;background:red;}
</style>
<script src="../pengxuan.js"></script>
<script src="../animate.js"></script>
<script>
	window.onload=function(){
		var out=getClass("out")[0];
		var float=getClass("float")[0];
		var lis=document.getElementsByTagName("li");
		var firstW=lis[0].offsetWidth;
		var firstL=lis[0].offsetLeft;	
		float.style.left=firstL+'px';
		float.style.width=firstW+'px';
		for(var i=0;i<lis.length;i++){
			lis[i].onmouseover=function(){
				
				animate(float,{left:this.offsetLeft,width:this.offsetWidth},300,Tween.Back.easeIn)	
			};	
		};
		out.onmouseout=function(){
			animate(float,{left:firstL,width:firstW},300,Tween.Back.easeIn)	
		};
	};
</script>
</head>

<body>
<div class="out">
	<div class="float"></div>
	<ul class="box">
    	<li><a href="#">第一选项</a></li>
    	<li><a href="#">第二ff选项</a></li>
    	<li><a href="#">第三fffs选项</a></li>
    	<li><a href="#">第四选项</a></li>
    	<li><a href="#">第五选项</a></li>
    	<li><a href="#">第六选项</a></li>
    </ul>
</div>
</body>
</html>
